* {
    /* change the font size to 12px if the buttons are floating */
    /* font-size: 12px; */
    font-size: 18px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
    /* background-color: black; */
    background-color: rgb(22,22,22);
}

.calc {
    height: 260px;
    width: 390px;
    background-color: rgb(49, 49, 49);
    display: flex;
    flex-direction: column;
    margin: auto;
    margin-top: 300px;
    padding: 10px;
    border-radius: 10px;
    
}

#screen {
    background-color: rgb(46, 46, 46);
    color: aliceblue;
    height: 30px;
    width: 380px;
    resize: none;
    border-radius: 10px;
    font-size: 24px;
    overflow: hidden;
    
}

.calc button {
    height: 40px;
    width: 60px;
    border-radius: 10px;
    background-color: rgb(102, 102, 102);
    color: aliceblue;
    font-size: 18px;
    border: transparent;
}

.calc button:hover {
    background-color: rgb(131, 130, 130);
}

#controls {
    background-color: rgb(73, 72, 72);
}

#controls:hover {
    background-color: rgb(88, 88, 88);
}

#equal {
    background-color: rgb(112, 112, 245);
    width: 49%;
}

#equal:hover {
    background-color: rgb(126, 126, 250);
}

#colors {
    background-color: deeppink;
}

#colors:hover {
    background-color: rgb(250, 69, 166);
}

#controls sup {
    font-size: 10px;
}

.row1, .row2, .row3, .row4, .row5 {
    padding: 2px;
}